<template>
	<view class="mui-content">
		<view class="mui-card">
			<!--页眉，放置标题-->
			<view class="mui-card-header mui-card-media">
				<image src="/static/logo.png"></image>
				<view class="mui-media-body">
					手机用户8877
				</view>
			</view>
			<!--内容区-->
			<view class="mui-card-content">
				<text class="percentage-user-title">
					默认抽成(%):
				</text>
				<view class="mui-numbox" data-numbox-min="0" data-numbox-max="50">
					<!-- "-"按钮，点击可减小当前数值 -->
					<view class="mui-btn mui-numbox-btn-minus" type="button" @click="minus">
						-
					</view>
					<input v-model="percentage" class="mui-numbox-input" maxlength="2" type="number">
					<!-- "+"按钮，点击可增大当前数值 -->
					<view class="mui-btn mui-numbox-btn-plus" @click="plus" type="button">
						+
					</view>
				</view>
			</view>
			<!--页脚，放置补充信息或支持的操作-->
			<view class="mui-card-footer">
				<view @click="settingPercentage" style="text-align: center; padding: 10rpx;" type="button" class="mui-btn mui-btn-danger mui-btn-block">
					设置抽成
				</view>
			</view>
		</view>
		<text class="percentage-usersList-title">
			任务抽成
		</text>
		<view class="mui-card task-percentage-table">
			<view id="task-percentage">

				<view class="mui-table-view" v-for="task in allTaskList" >
					<view class="mui-table-view-cell mui-media">
						<view class="percentage-ul-li-a">
							<image class="mui-media-object mui-pull-left" src=""></image>
							<view class="mui-media-body">
								{{task.title}}
								<view>
									抽成比例: {{ task.proportion??0 }} %
								</view>
							</view>
							<view @click="settingUsersPercentage(task)" style="" class="mui-btn mui-btn-warning percentage-usersList-btn"
							type="button">
								设置
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>


		<view class="mui-popup mui-popup-in" v-if="active">
			<view class="mui-popup-inner">
				<view class="mui-popup-title">
					今日下级用户做单统计
				</view>
				<view class="mui-popup-text">
					不可填写小数.示例:10
				</view>
				<view class="mui-popup-input">
					<input type="text" v-model="currentData.proportion" autofocus="" placeholder="请输入抽成比例">
				</view>
			</view>
			<view class="mui-popup-buttons">
							<text class="mui-popup-button" @click="submit">
								确定
							</text>
							<text class="mui-popup-button mui-popup-button-bold" @click="cancel">
								取消
							</text>
			</view>
		</view>

		<view class="mui-popup-backdrop mui-active" v-if="active"></view>
	</view>
</template>

<script setup>
	import { ref,reactive } from "vue"
	import { useUserStore } from '@/store/userStore';
	import { setPercentage } from '@/api/member.js';
	import { allTask,setProportion } from '@/api/task.js'
	const allTaskList = ref([]);
	const userStore = useUserStore();
	const active = ref(false);
	const percentage = ref(userStore.userDetails?.percentage? Number(userStore.userDetails?.percentage):0)
	const currentData = reactive({
		proportion:0
	});
	const minus = ()=>{
		if(percentage.value>=1) percentage.value--;
	}

	const plus = ()=>{
		if(percentage.value<50) percentage.value++;
	}
	const settingPercentage = ()=>{
		uni.showLoading();
		const res = setPercentage({proportion:percentage.value}).then(res=>{
			userStore.updateUserDetails({percentage:percentage.value});
			uni.showToast({ title: '设置成功' });
		}).catch(error=>{
			//uni.showToast({ title: '设置失败'+percentage.value, icon: 'error' });
		}).finally(()=>{
			uni.hideLoading();
		})
	}

	const getAllTask = async() =>{
		uni.showLoading();
		await allTask().then(res => {
		  if (Array.isArray(res)) {
			// 安全合并数据
			allTaskList.value = [...res];
		  } else {
			console.error("接口返回非数组", res);
		  }
		}).catch(err => {
		  console.error("请求失败:", err);
		}).finally(() => {
		  uni.hideLoading();
		});
	}

	const settingUsersPercentage = (current)=>{
		Object.assign(currentData, current);
		active.value=true;
	}

	getAllTask();

	const submit = async()=>{
		active.value=false;
		uni.showLoading();
		await setProportion(currentData).then(res=>{
			uni.showToast({ title: '设置成功' });
			getAllTask();
		}).catch(() => {
		  uni.hideLoading();
		});
	}
	
	const cancel = ()=>{
		active.value=false;
	}

</script>

<style scoped>
	.mui-content {
	    background-color: #efeff4;
	    -webkit-overflow-scrolling: touch;
	}
	.mui-content > .mui-card:first-child {
	    margin-top: 15px;
	}
	.mui-card {
	    font-size: 14px;
	    position: relative;
	    overflow: hidden;
	    margin: 10px;
	    border-radius: 2px;
	    background-color: white;
	    background-clip: padding-box;
	    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	}
	.mui-card-header.mui-card-media {
	    display: block;
	    padding: 10px;
	}
	.mui-card-media {
	    vertical-align: bottom;
	    color: #fff;
	    background-position: center;
	    background-size: cover;
	}
	.mui-card-header {
	    font-size: 17px;
	    border-radius: 2px 2px 0 0;
	}
	.mui-card-header, .mui-card-footer {
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    min-height: 80rpx;
	    padding: 10px 15px;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	.mui-card-header > image:first-child {
	    font-size: 0;
	    line-height: 0;
	    float: left;
	    width: 34px;
	    height: 34px;
	}

	image {
		display: inline-block;
		vertical-align: middle;
	}
	.mui-card-header.mui-card-media .mui-media-body {
	    font-size: 14px;
	    font-weight: 500;
	    line-height: 17px;
	    margin-bottom: 0;
	    margin-left: 44px;
	    color: #333;
	}

	.mui-card-content {
	    padding: 2%;
		font-size: 14px;
		position: relative;
	}
	.percentage-user-title {
	    margin-right: 5%;
	    margin-left: 15%;
		box-sizing: border-box;
	}
	.mui-numbox {
	    position: relative;
	    display: inline-block;
	    overflow: hidden;
	    width: 90rpx;
	    height: 50rpx;
	    padding: 0 80rpx 0 80rpx;
	    vertical-align: top;
	    vertical-align: middle;
	    border: solid 1rpx #bbb;
	    border-radius: 1rpx;
	    background-color: #efeff4;
	}

	.mui-numbox .mui-numbox-btn-minus{
	    left: 0;
	    border-top-left-radius: 1rpx;
	    border-bottom-left-radius: 1rpx;
	    font-size: 40rpx;
	    font-weight: normal;
	    line-height: 100%;
	    position: absolute;
	    top: 0;
	    overflow: hidden;
	    width: 80rpx;
	    height: 100%;
	    padding: 0;
	    color: #555;
	    border: none;
	    border-radius: 0;
	    background-color: #f9f9f9;
		text-align: center;
	}
	.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox {
	    display: inline-block;
	    overflow: hidden;
	    width: 100% !important;
	    height: 100%;
	    margin: 0;
	    padding: 0 3px !important;
	    text-align: center;
	    text-overflow: ellipsis;
	    word-break: normal;
	    border: none !important;
	    border-right: solid 1px #ccc !important;
	    border-left: solid 1px #ccc !important;
	    border-radius: 0 !important;
	}

	.mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus {
	    right: 0;

	    font-size: 40rpx;
	    font-weight: normal;
	    line-height: 100%;
	    position: absolute;
	    top: 0;
	    overflow: hidden;
	    width: 80rpx;
	    height: 100%;
	    padding: 0;
	    color: #555;
	    border: none;
	    border-radius: 0;
	    background-color: #f9f9f9;
		text-align: center;
	}
	.mui-card-header:after, .mui-card-footer:before {
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #e5e5e5;
	}
	.mui-btn-block {
	    font-size: 34rpx;
	    display: block;
	    width: 100%;
	    margin-bottom: 10rpx;
	    padding: 5rpx 0;
	}
	.mui-btn-negative, .mui-btn-danger, .mui-btn-red {
	    color: #fff;
	    border: 1px solid #dd524d;
	    background-color: #dd524d;
	}
	.mui-btn {
	    padding: 0rpx;
	}
	.mui-card-content {
	    font-size: 24rpx;
	    position: relative;
	}
	.mui-card-header:after {
	    top: auto;
	    bottom: 0;
	}
	.mui-card-header:after, .mui-card-footer:before {
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #e5e5e5;
	}
	.percentage-usersList-title {
	    font-size: 20rpx;
	    margin: 1%;
	}
	.mui-card .mui-table-view {
	    margin-bottom: 0;
	    border-top: 0;
	    border-bottom: 0;
	    border-radius: 6px;
	}
	.mui-table-view {
	    position: relative;
	    margin-top: 0;
	    margin-bottom: 0;
	    padding-left: 0;
	    list-style: none;
	    background-color: #fff;
	}

	.mui-card .mui-table-view:before, .mui-card .mui-table-view:after {
	    height: 0;
	}
	.mui-table-view:before {
	    top: -1px;
	}
	.mui-table-view:before {
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    height: 0;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	.mui-card .mui-table-view:before, .mui-card .mui-table-view:after {
	    height: 0;
	}
	.mui-table-view:after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 1rpx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    color: #e5e5e5;
	    border-bottom: 1rpx solid #e8e8e8;
	}
	.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child {
	    border-bottom-right-radius: 6px;
	    border-bottom-left-radius: 6px;
	}
	.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child {
	    top: 0;
	    border-top-left-radius: 6px;
	    border-top-right-radius: 6px;
	}
	.mui-ios .mui-table-view-cell {
	    -webkit-transform-style: preserve-3d;
	    transform-style: preserve-3d;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
	    overflow: hidden;
	}

	.mui-table-view-cell {
	    position: relative;
	    overflow: hidden;
	    padding: 13rpx 15rpx;
	    -webkit-touch-callout: none;
	}
	.mui-table-view-cell:last-child:before, .mui-table-view-cell:last-child:after {
	    height: 0;
	}
	.mui-table-view-cell:after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 15rpx;
	    height: 1rpx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #e8e8e8;
	}
	.mui-table-view .mui-media-object.mui-pull-left {
	    margin-right: 10rpx;
	}
	.mui-table-view .mui-media-object {
	    line-height: 42rpx;
	    max-width: 42rpx;
	    height: 42rpx;
	}
	.mui-pull-left {
	    float: left;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
	    overflow: hidden;
	}
	.percentage-usersList-btn {
	    float: right;
	    margin-top: -7%;
	    padding: 1% 1.5%;
	}
	.mui-btn-warning, .mui-btn-yellow {
	    color: #fff;
	    border: 1px solid #f0ad4e;
	    background-color: #f0ad4e;
	}
	.mui-popup.mui-popup-in {
	    display: block;
	    -webkit-transition-duration: 400ms;
	    transition-duration: 400ms;
	    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
	    transform: translate3d(-50%, -50%, 0) scale(1);
	    opacity: 1;
	}
	.mui-popup {
	    position: fixed;
	    z-index: 10000;
	    top: 50%;
	    left: 50%;
	    display: none;
	    overflow: hidden;
	    width: 270px;
	    -webkit-transition-property: -webkit-transform, opacity;
	    transition-property: transform, opacity;
	    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
	    transform: translate3d(-50%, -50%, 0) scale(1.185);
	    text-align: center;
	    opacity: 0;
	    color: #000;
	    border-radius: 13px;
	}

	.mui-popup-inner {
	    position: relative;
	    padding: 15px;
	    border-radius: 13px 13px 0 0;
	    background: rgba(255, 255, 255, .95);
	}
	.mui-popup-title {
	    font-size: 16px;
	    font-weight: 500;
	    color: #333;
	    text-align: center;
	}
	.mui-popup-title + .mui-popup-text {
	    font-family: inherit;
	    font-size: 13px;
	    color: #666;
	    margin: 10px 0 0;
	}
	.mui-popup-input input {
	    font-size: 14px;
	    width: 100%;
	    height: 35px;
	    margin: 5px 0 0;
	    padding: 0 5px;
	    border: 0;
	    border-bottom: 1px solid #666;
	    border-radius: 0;
	    background: #fff;
	}

	.mui-popup-buttons {
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    height: 44px;
	    box-pack: center;
	    justify-content: center;
	}
	.mui-popup-button:first-child {
	    /* border-radius: 0 0 0 13px; */
	    color: #39b54a;
	}
	.mui-popup-button {
	    font-size: 14px;
	    line-height: 44px;
	    position: relative;
	    display: block;
	    overflow: hidden;
	    box-sizing: border-box;
	    width: 100%;
	    height: 44px;
	    padding: 0 5px;
	    cursor: pointer;
	    text-align: center;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #007aff;
	    background: #fff;
	    -webkit-box-flex: 1;
	}
	.mui-popup-button.mui-popup-button-bold {
	    font-weight: 500;
	}
	.mui-popup-button:last-child {
	    /* border-radius: 0 0 13px 0; */
	}
	.mui-popup-backdrop.mui-active {
	    opacity: 1;
	}
	.mui-popup-backdrop {
	    position: fixed;
	    z-index: 998;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    -webkit-transition-duration: 400ms;
	    transition-duration: 400ms;
	    opacity: 0;
	    background: rgba(0, 0, 0, .4);
	}
</style>
